<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="renderer" content="webkit|ie-stand|ie-comp" />
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>找回密码_虎扑体育</title>
<link rel="stylesheet" href="{{asset('/HomeCss/find/css/reset.css?v=2017010501')}}">
<link rel="stylesheet" href="{{asset('/HomeCss/find/css/passport.css?v=2017010501')}}">
<style type="text/css">
   #cards form{display: none;}
   #cards form.active{
        display: block;
    } 
    .pwdTab a.on {
    border-bottom: 2px solid #e42837;
    color: #e42837;
    }
    .hidden{width:378px;height:23px;border:1px solid #F5D7D7;background-color:#F5D7D7;color:red;line-height:23px;display:none;}
</style>
</head>
<body>
    <div class="bg-img">
        <img src="{{asset('/HomeCss/find/picture/bg.jpg')}}" alt="">
    </div>       
    <div class="user-login">
    	<div class="back-title">
            <a href="{{url('/home/login/login/')}}"><b>返回登录</b></a>
        </div>
        <div class="login-wrap">
            <h3 class="title">密码找回</h3>
            <div class="pwdTab clearfix" id='options'>
                <a href="javascript:;"  class="fl on active">手机方式找回</a> 
                <a href="javascript:;" class="fl ">邮箱方式找回</a> 
            </div>
            <div class="tab-wrap" id='cards'>
                <form action="{{url('/home/login/resetpass')}}"  class="common-form find-form active" id="J_findForm1" autocomplete="off" method="post" >
                    <ul>
                        <li class="clearfix">
                            <div class="ipt-wrap">
                                <input autocomplete="off" type="text" tabindex="1" name="phone" placeholder="请输入绑定的手机号码，仅支持大陆地区手机号" data-rule="empty|phone" data-name="绑定的手机号" class="mobile" maxlength="11">
                                <div class='hidden'></div>
                            </div>
                        </li>
                        
                        <li class="clearfix">
                            <div class="ipt-wrap valicode-wrap fl">
                                <input autocomplete="off" type="text"  tabindex="2" placeholder="输入验证码" name="code" class="authcode fl" maxlength="6" data-rule="empty|authcode" data-name="验证码" >
                                <div class='hidden' style='width:163px;position:absolute;left:0px;top:42px;margin-bottom:0px'></div>
                            </div>
                            <img src="/Vcode" alt="" class="vali-img fl " id="j_img1">
                            <img src="/HomeCss/find/images/refresh.png" style='position:absolute;left:340px;top:10px;cursor:pointer;transform:rotate(0deg)' id='refresh1'>
                        </li>
                        <li class="clearfix" style='position:relative'>
                            <div class="ipt-wrap authcode-wrap fl">
                                <input autocomplete="off" type="text"  tabindex="3" name="message" placeholder="输入短信验证码" data-rule="empty|msgcode" class="msgcode" data-name="短信验证码" maxlength="6">
                                <div class='hidden'></div>
                            </div>
                            <button type="button" class="get-vercode fl" data-btn="短信发送中">获取短信验证码</button>
                        </li>
                        <li class="clearfix">
                            <div class="ipt-wrap">
                                <input autocomplete="off" type="password"  tabindex="4" name="password" placeholder="新密码" data-rule="empty|password" data-name="新密码" maxlength="20">
                                <div class='hidden'></div>
                            </div>
                        </li>
                        <li class="clearfix">
                            <div class="ipt-wrap">
                                <input autocomplete="off" type="password"  tabindex="5" name="repassword" placeholder="确认新密码" data-rule="empty|same" data-name="确认密码" maxlength="20">
                                <div class='hidden'></div>
                            </div>
                        </li>
                        <li class="clearfix">
                        {{csrf_field()}}               
                        <input type="submit" class="submit-btn" id="J_submit1" value="提交"></li>
                    </ul>
                </form>

                <form action="{{url('/home/login/update')}}" class="common-form find-form " id="J_findForm2" autocomplete="off" method="post">
                    <ul>
                        <li class="clearfix">
                            <div class="ipt-wrap">
                                <input autocomplete="off" type="text"  tabindex="1" placeholder="请输入绑定的安全邮箱地址" data-rule="empty|mail" name="email" data-name="绑定的安全邮箱" class="mobile" maxlength="30">
                                <div class='hidden'></div>
                            </div>
                        </li>
                        
                        <li class="clearfix">
                            <div class="ipt-wrap valicode-wrap fl">
                                <input autocomplete="off" type="text"  tabindex="2" placeholder="输入右侧验证码" name="code1" class="authcode fl" maxlength="6" data-rule="empty|authcode" class="msgcode" data-name="验证码" >
                                <div class='hidden' style='width:163px;position:absolute;left:0px;top:42px;margin-bottom:0px'></div>
                            </div>
                            <img src="/Ecode" alt="" class="vali-img fl " id="j_img2">
                            <img src="/HomeCss/regist/images/refresh.png" style='position:absolute;left:340px;top:10px;cursor:pointer;transform:rotate(0deg)' id='refresh2'>
                        </li>
                        <li class="clearfix">
                            <div class="ipt-wrap authcode-wrap fl">
                                <input autocomplete="off" type="text"  tabindex="3" placeholder="输入邮箱验证码" name="message1" class="msgcode" data-rule="empty|emailcode" data-name="邮箱验证码" maxlength="6">
                                <div class='hidden'></div>
                            </div>
                            <button type="button" class="get-vercode fl" data-btn="邮件发送中">发送验证码到邮箱</button>
                        </li>
                        <li class="clearfix">
                            <div class="ipt-wrap">
                                <input autocomplete="off" type="password"  tabindex="4" name="password1" placeholder="新密码" data-rule="empty|password" data-name="新密码" maxlength="20">
                                <div class='hidden'></div>
                            </div>
                        </li>
                        <li class="clearfix">
                            <div class="ipt-wrap">
                                <input autocomplete="off" type="password"  tabindex="5" name="repassword1" placeholder="确认新密码" data-rule="empty|same" data-name="确认密码" maxlength="20">
                                <div class='hidden'></div>
                            </div>
                        </li>
                        <li class="clearfix">
                        {{csrf_field()}}
                        <input type="submit" class="submit-btn" id="J_submit2" value="提交"></li>
                    </ul>
                </form>
            </div>

        </div>
    </div>
    <script src="{{asset('/HomeCss/find/js/jquery-1.8.3.min.js')}}"></script>
    <script type="text/javascript">
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        //获取所有的选项 
        var options = document.getElementById('options').getElementsByTagName('a');
        //获取所有的卡
        var cards = document.getElementById('cards').getElementsByTagName('form');
        //给所有的选项绑定单击事件
        for (var i = 0; i < options.length; i++) {
            options[i].index = i;//给所有的选项添加属性 代表的是当前这个选项的索引
            //绑定单击事件
            options[i].onclick = function()
            {
                //全部移出active
                for(var j = 0;j < options.length;j++){
                    options[j].className = '';
                    options[j].className='fl';
                    cards[j].className = '';           
                    cards[j].className = 'common-form find-form';
                }
                //当前的选项添加 active
                this.className = 'active fl on';
                //当前的选项添加 active
                cards[this.index].className = 'active common-form find-form';
            }
        };
        /*

            手机找回密码
        */
        <!-- 验证码刷新 -->
        //获取元素绑定单击事件
        var refresh1=document.getElementById('refresh1');
        var j_img1=document.getElementById('j_img1');
        refresh1.onclick=function()
        {
            var d = 0;
            //启动定时器，旋转图片
            var inte = setInterval(function(){
                refresh1.style.transform = 'rotate('+d+'deg)';
                d+=10;
                if(d > 360){
                    clearInterval(inte);
                }
            },10);
            //刷新页面
            j_img1.src=j_img1.src+'?a=1';
        }

        //表单验证
        //声明全局变量
        var PHONE = false;     
        var CVODE = false;
        var MESSAGE = false;
        var CPASS = false;
        var REPASS = false;
        //绑定表单事件
        $('form').submit(function(){
            //触发所有的丧失焦点事件
            $('input').trigger('blur');
            //判断是否全部成功
            if(PHONE && CPASS && CVODE  && REPASS && MESSAGE){
                return true;
            }
            return false;
        });
        //给所有的字段绑定获取焦点事件
        $('input').focus(function(){
            //获取属性 提示信息
            var message = $(this).parent().find('.hidden').html();
        });

        //检查手机号
        $('input[name=phone]').blur(function(){
            //检查用户名是否为空
            if($(this).val() == ''){ 
                $(this).next().html('手机号不能为空').css('display','block');      
                return false;
            }else{
                $(this).next().css('display','none');
            }
            var phone=$(this).val();
            var inp=$(this);
            //判断输入的手机号是否符合要求
            var reg = /^1[3-8]\d{9}$/;
            if(!reg.test(phone)){
                $(this).next().html('手机号格式不正确').css('display','block');
                return false;
            }else{
                $(this).next().css('display','none');
            }
            //发送ajax判断手机号是否已注册
            $.get('/home/login/check',{phone:phone},function(data){
                // console.log(data);
                if(data==1){
                  PHONE = true;  
                }else{
                  inp.next().html('该手机号未注册').css('display','block');
                  return false;                  
                }
            });
        });

        //验证码
        $('input[name=code]').blur(function(){
            var code=$(this).val();
            //判断验证码是否为空
            if($(this).val() == ''){ 
                $(this).next().html('验证码不能为空').css('display','block');      
                return false;
            } 
            var inp=$(this);
            //发送ajax
            $.get('/home/login/code',{code:code},function(data){
                if(data==1){
                    inp.next().css('display','none');
                    CVODE = true;
                }else{
                    inp.next().html('验证码不正确').css('display','block');
                    return false;
                }
            });

        });

        //短信发送中倒计时              
        $('.get-vercode').click(function(){
            $('input[name=message]').next().css('display','none');
            //获取输入的手机号
            var phone=$('input[name=phone]').val();
            if(PHONE &&  CVODE)
            {
                var btn= $(this);
                var time=61;
                var inte=setInterval(function(){
                    btn.attr('disabled',true);
                    time--;
                    btn.html(time+'S后再次点击发送');
                    btn.css('background','gray');
                    if(time==0){
                        clearInterval(inte);
                        btn.attr('disabled',false);
                        btn.html('获取短信验证码');
                        btn.css('background','#E42837');
                    }
                 },1000);
                var message=$('input[name=message]').val();
                $.get('/home/login/message',{phone:phone},function(data){              
                    if (data == 1) {
                           return true; 
                    }else{
                        return false;
                    }
                });
            }else{
                $('input[name=message]').next().html('请完善以上信息').css('display','block');
            }
        });

        //短信验证码比对
         $('input[name=message]').blur(function(){
            var inp=$(this);
            //判断验证码是否为空
            if($(this).val() == ''){ 
                $(this).next().html('短信验证码不能为空').css('display','block');      
                return false;
            } 
            var codemessage = $(this).val();
            $.get('/home/login/yanzheng',{mcode:codemessage},function(data){
                if (data == 1) {
                    //验证成功
                    inp.next().css('display','none');
                    MESSAGE = true;
                }else{
                    //验证失败
                    inp.next().html('短信验证码不正确').css('display','block');
                    return false;
                }
            });
         });

        //新密码
        $('input[name=password]').blur(function(){
            //判断密码是否为空
            if($(this).val() == ''){ 
                $(this).next().html('密码不能为空').css('display','block');      
                return false;
            } 
            //判断输入密码是否符合要求
            var pass=$(this).val();
            var reg = /\w{6,18}/;       

            if(reg.test(pass)){
                $(this).next().css('display','none');
                CPASS = true;
            }else{
                $(this).next().html('密码格式不正确').css('display','block');
                return false;
            }
        });

        //确认密码
        $('input[name=repassword]').blur(function(){
            //判断密码是否为空
            if($(this).val() == ''){ 
                $(this).next().html('确认密码不能为空').css('display','block');      
                return false;
            } 
            //判断输入密码是否符合要求
            var pass=$(this).val();
            var reg = /\w{6,18}/;       

            if(reg.test(pass)){
                $(this).next().css('display','none');
                
            }else{
                $(this).next().html('密码格式不正确').css('display','block');
                return false;
            }

            //判断两次密码是否一致
            if($('input[name=password]').val() == $(this).val())
            {
                $(this).next().css('display','none');
                REPASS = true;
                CPASS = true;
            }else{
                $(this).next().html('两次输入的密码不一致').css('display','block');
                return false;
            }
        });

        
    </script>
    <script type="text/javascript">
        /*
            邮箱找回密码
        */
        // $.ajaxSetup({
        //     headers: {
        //         'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        //     }
        // });
        // //验证码刷新
        // var refresh2=document.getElementById('refresh2');
        // var j_img2=document.getElementById('j_img2');
        // refresh2.onclick=function()
        // {
        //     var d = 0;
        //     //启动定时器，旋转图片
        //     var inte = setInterval(function(){
        //         refresh2.style.transform = 'rotate('+d+'deg)';
        //         d+=10;
        //         if(d > 360){
        //             clearInterval(inte);
        //         }
        //     },10);
        //     //刷新页面
        //     j_img2.src=j_img2.src+'?a=1';
        // }


        // //表单验证
        // //声明全局变量
        // var EMAILL = false;     
        // var CVODE = false;
        // var MESSAGE = false;
        // var CPASS = false;
        // var REPASS = false;
        // //绑定表单事件
        // $('form').submit(function(){
        //     //触发所有的丧失焦点事件
        //     $('input').trigger('blur');
        //     //判断是否全部成功
        //     if(EMAILL && CPASS && CVODE && MESSAGE && REPASS){
        //         return true;
        //     }
        //     return false;
        // });
        // //给所有的字段绑定获取焦点事件
        // $('input').focus(function(){
        //     //获取属性 提示信息
        //     var message = $(this).parent().find('.hidden').html();
        // });

        // //检查邮箱
        // $('input[name=email]').blur(function(){
        //     //检查用户名是否为空
        //     if($(this).val() == ''){ 
        //         $(this).next().html('邮箱不能为空').css('display','block');      
        //         return false;
        //     }else{
        //         $(this).next().css('display','none');
        //     }
        //     var email=$(this).val();
        //     var inp=$(this);
        //     //判断输入的邮箱是否符合要求
        //     var reg = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
        //     if(!reg.test(email)){
        //         $(this).next().html('邮箱格式不正确').css('display','block');
        //         return false;
        //     }else{
        //         $(this).next().css('display','none');
        //     }
        //     //发送ajax判断邮箱号是否已注册
        //     $.get('/home/login/email',{email:email},function(data){
        //         // console.log(data);
        //         if(data==1){
        //           EMAILL = true;  
        //         }else{
        //           inp.next().html('该邮箱未注册').css('display','block');
        //           return false;                  
        //         }
        //     });
        // });

        // //验证码
        // $('input[name=code1]').blur(function(){
        //     var code=$(this).val();
        //     //判断验证码是否为空
        //     if($(this).val() == ''){ 
        //         $(this).next().html('验证码不能为空').css('display','block');      
        //         return false;
        //     } 
        //     var inp=$(this);
        //     //发送ajax
        //     $.get('/home/login/emcode',{code:code},function(data){
        //         console.log(data);
        //         if(data==1){
        //             inp.next().css('display','none');
        //             CVODE = true;
        //         }else{
        //             inp.next().html('验证码不正确').css('display','block');
        //             return false;
        //         }
        //     });

        // });

        // //邮箱发送中倒计时              
        // $('.get-vercode').click(function(){
        //     $('input[name=message1]').next().css('display','none');
        //     //获取输入的邮箱
        //     var email=$('input[name=email]').val();
        //     if(EMAILL &&  CVODE)
        //     {
        //         var btn= $(this);
        //         var time=61;
        //         var inte=setInterval(function(){
        //             btn.attr('disabled',true);
        //             time--;
        //             btn.html(time+'S后再次点击发送');
        //             btn.css('background','gray');
        //             if(time==0){
        //                 clearInterval(inte);
        //                 btn.attr('disabled',false);
        //                 btn.html('获取邮箱验证码');
        //                 btn.css('background','#F0F0F0');
        //             }
        //          },1000);
        //         var message=$('input[name=message1]').val();
        //         $.get('/home/login/emailcode',{email:email},function(data){              
        //             if (data == 1) {
        //                    return true; 
        //             }else{
        //                 return false;
        //             }
        //         });
        //     }else{
        //         $('input[name=message1]').next().html('请完善以上信息').css('display','block');
        //     }
        // });

        // //邮箱验证码比对
        //  $('input[name=message1]').blur(function(){
        //     var inp=$(this);
        //     //判断验证码是否为空
        //     if($(this).val() == ''){ 
        //         $(this).next().html('以上输入框不能为空').css('display','block');      
        //         return false;
        //     } 
        //     var codemessage = $(this).val();
        //     $.get('/home/login/youxiang',{message:codemessage},function(data){
        //         if (data == 1) {
        //             //验证成功
        //             inp.next().css('display','none');
        //             MESSAGE = true;
        //         }else{
        //             //验证失败
        //             inp.next().html('邮箱验证码不正确').css('display','block');
        //             return false;
        //         }
        //     });
        //  });

        // //新密码
        // $('input[name=password1]').blur(function(){
        //     //判断密码是否为空
        //     if($(this).val() == ''){ 
        //         $(this).next().html('密码不能为空').css('display','block');      
        //         return false;
        //     } 
        //     //判断输入密码是否符合要求
        //     var pass=$(this).val();
        //     var reg = /\w{6,18}/;       

        //     if(reg.test(pass)){
        //         $(this).next().css('display','none');
        //     }else{
        //         $(this).next().html('密码格式不正确').css('display','block');
        //         return false;
        //     }
        // });

        // //确认密码
        // $('input[name=repassword1]').blur(function(){
        //     //判断密码是否为空
        //     if($(this).val() == ''){ 
        //         $(this).next().html('确认密码不能为空').css('display','block');      
        //         return false;
        //     } 
        //     //判断输入密码是否符合要求
        //     var pass=$(this).val();
        //     var reg = /\w{6,18}/;       

        //     if(reg.test(pass)){
        //         $(this).next().css('display','none');
                
        //     }else{
        //         $(this).next().html('密码格式不正确').css('display','block');
        //         return false;
        //     }

        //     //判断两次密码是否一致
        //     if($('input[name=password1]').val() == $(this).val())
        //     {
        //         $(this).next().css('display','none');
        //         REPASS = true;
        //         CPASS = true;
        //     }else{
        //         $(this).next().html('两次输入的密码不一致').css('display','block');
        //         return false;
        //     }
        // });



    </script>
    
</body>
</html>